<template>
  <aside id="blog-aside" class="lf">
    <div class="hots" v-show="hotList.length>0">
      <p class="title">
        <img src="/images/hot.png">
        <strong>热门文章</strong>
      </p>
      <ul class="article-list">
        <li class="item ellipsis" v-for="(item,index) in hotList" :key="item.id" @click="doArticle(item)">
          <span>{{index+1}}</span>
          <a>{{item.title}}</a>
        </li>
      </ul>
    </div>
    <div class="tags clear" :class="[isFixed?'is-fixed':'']" v-show="tagList.length>0">
      <a class="tag lf clear" :class="[route.name=='tag'&&route.query.tagTd==item.id?'active':'']" v-for="item in tagList" :key="item.id" @click="doTag(item)">
        <div v-if="item.icon" class="tag-img lf">
          <img :title="item.name" :src="`${apiBase}/${item.icon}`">
        </div>
        <p class="tag-name lf" :class="[!item.icon?'no-icon':'']">{{item.name}} ({{item.articleNum}})</p>
      </a>
    </div>
  </aside>
</template>

<script setup lang="ts">
const { public: { apiBase } } = useRuntimeConfig()
const route = useRoute()
const isFixed = ref(false)
interface article {
  id:number,
  title:string
}
interface tag {
  id:number,
  icon:string,
  name:string
}
interface Props {
  hotList:article[],
  tagList:tag[]
}

const props = withDefaults(defineProps<Props>(), {
    hotList: () => {return []},
    linkList: () => {return []}
})
// 滚动吸顶
const handleScroll = () => {
  let scrollTop = document.getElementById('app')?.scrollTop;
  let appHeight = document.getElementById('app')?.offsetHeight;
  let sectionHeight = document.getElementById('blog-section')?.offsetHeight;    
  let hotsElement:HTMLElement = <HTMLElement>document.querySelector('#app .hots')
  let tagsElement:HTMLElement = <HTMLElement>document.querySelector('#app .tags')
  let hotsHeight = hotsElement.offsetHeight+15;     
  let tagsHeight = tagsElement.offsetHeight+15;   
  if(scrollTop&&sectionHeight&&appHeight){
    if(scrollTop>=hotsHeight&&hotsHeight<sectionHeight&&tagsHeight<=appHeight-75){
      isFixed.value = true;
    }else{
      isFixed.value = false;
    }
  }
}
const doArticle = async (item:article) => {
  await navigateTo({
    path:'/article',
    query:{
      id:item.id
    }
  })
}
const doTag = async (item:tag) => {
  await navigateTo({
    path:'/tag',
    query:{
      tagId:item.id
    }
  })
}
onMounted(()=>{
  document.getElementById('app')?.addEventListener('scroll', handleScroll)
})
onUnmounted(()=>{
  document.getElementById('app')?.removeEventListener('scroll', handleScroll)
})
</script>

<style lang="less">
  #blog-aside{
    width:266px;
    .hots{
      margin-bottom:15px;
      border-radius:4px;
      background:#fff;
      .title{
        line-height:42px;
        padding:0 12px;
        border-bottom:1px dotted #e8e8e8; 
        >img{
          width:14px;
        }
      }
    }
    .article-list{
      padding:7.5px 0;
      .item{
        padding:0 12px 0;
        margin-bottom:12px;
        &:nth-child(1){
          >span{
            color:#fff;
            background:#e4393c;
          }
        }
        &:nth-child(2){
          >span{
            color:#fff;
            background:#F07C3B;
          }
        }
        &:nth-child(3){
          >span{
            color:#fff;
            background:#FCED50;
          }
        }      
        >span{
          display:inline-block;
          width:18px;
          height:18px;
          margin-right:7.5px;
          text-align:center;
          line-height:18px;
          background:#E8E8E8;
          border-radius:2px;
          font-size:12px;
          font-weight:bold;
          color:#B1B1B1;        
        }
        >a{
          &:hover{
            text-decoration:underline;
          }
        }
      }
    }
    .tags{
      padding:0 12px 12px;
      border-radius:4px;
      background:#fff;
      &.is-fixed{
        position:fixed;
        top:75px;
        width:266px;
      }
      .tag{
        margin:12px 7.5px 0 0;
        line-height:28px;        
        &:hover{
          .tag-img{
            background:#DEDEDE;
          }
          .tag-name{
            background:#CFCFCF;
          }
        }
        &.active{
          color:#fff;
          .tag-img{
            background:#7EC2F9;
          }
          .tag-name{
            background:#0088F5;
          }
        }
        .tag-img{    
          height:28px; 
          line-height:28px;
          padding:0 7.5px;   
          border-radius:2px 0 0 2px;
          background:#E8E8E8;
          transition:background .2s;
          >img{
            margin-top:6px;
            max-width:20px;
            height:16px;
          }
        }
        .tag-name{
          padding:0 7.5px;
          border-radius:0 2px 2px 0;
          background:#DEDEDE;
          transition:background .2s;
          &.no-icon{
            border-radius:2px;
          }
        }
      }
    }   
  }
</style>